<template>
  <div class="about">
    <div>
        用户界面
    </div>  
    <div v-for="(item,index) in list" :key="index" @click="num(item.id)">
      <div class="imgs">
        <img :src="item.icon" alt="">
        <div class="names">{{item.name}}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return{
      list:[]
    }
  },
  methods:{
    num(id){
      this.$router.push({
        name:"about",
        params:{
          id:id
        }
      })
    }
  },
  mounted(){
    this.$axios({
        url:"https://www.escook.cn/categories",
        method:"get",
      }).then(res=>{
        this.list=res.data
      })
  }
}
</script>

<style scoped>
.imgs{
  float: left;
}
.names{
  text-align: center;
}
</style>

